import 'package:flutter/material.dart';

// 先定义一个数据结构CardItemModel来存储信息。
class CardItemModel {
  String appIcon;//App图标
  String appName;//App名称
  String appSize;//App大小
  String appDate;//App更新日期
  String appDescription;//App更新文案
  String appVersion;//App版本
  //构造函数语法糖，为属性赋值
  CardItemModel({
    required this.appIcon,
    required this.appName,
    required this.appSize,
    required this.appDate,
    required this.appDescription,
    required this.appVersion
  });
}

class MyCardWithIcon extends StatelessWidget {
  final CardItemModel model;
  //构造函数语法糖，用来给model赋值
  const MyCardWithIcon({
    required Key key,
    required this.model,
    required this.onPressed
  }) : super(key: key);
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 8.0, // 阴影模糊半径
            spreadRadius: 2.0, // 阴影扩散半径
            offset: const Offset(2.0, 2.0), // 阴影偏移量
          ),
        ],
      ),
      child: Column(//用Column将上下两部分合体
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            buildTopRow(context),//上半部分
            buildBottomRow(context)//下半部分
          ]),
    );
  }

  Widget buildTopRow(BuildContext context) {
    return Row( //Row控件，用来水平摆放子Widget
        children: <Widget>[
          Padding(//Padding控件，用来设置Image控件边距
              padding: const EdgeInsets.all(10),//上下左右边距均为10
              child: ClipRRect(//圆角矩形裁剪控件
                  borderRadius: BorderRadius.circular(8.0),//圆角半径为8
                  child: Image.asset(model.appIcon, width: 80,height:80)  // 图片控件
              )
          ),
          Expanded(//Expanded控件，用来拉伸中间区域
            child: Column(//Column控件，用来垂直摆放子Widget
              mainAxisAlignment: MainAxisAlignment.center,//垂直方向居中对齐
              crossAxisAlignment: CrossAxisAlignment.start,//水平方向居左对齐
              children: <Widget>[
                Text(
                  model.appName,
                  maxLines: 1,
                  style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  overflow: TextOverflow.ellipsis
                ),//App名字
                Text(
                  model.appDate,
                  maxLines: 1,
                  style: const TextStyle(color: Colors.grey),
                  overflow: TextOverflow.ellipsis
                ),//App更新日期
              ],
            ),
          ),
          Padding(//Padding控件，用来设置Widget间边距
              padding: const EdgeInsets.fromLTRB(0,0,10,0),//右边距为10，其余均为0
              child: FilledButton(//按钮控件
                onPressed: onPressed,//按钮控件
                child: const Text("OPEN"),//点击回调
              )
          )
        ]);
  }

  Widget buildBottomRow(BuildContext context) {
    return Padding(//Padding控件用来设置整体边距
        padding: const EdgeInsets.fromLTRB(15,0,15,0),//左边距和右边距为15
        child: Column(//Column控件用来垂直摆放子Widget
            crossAxisAlignment: CrossAxisAlignment.start,//水平方向距左对齐
            children: <Widget>[
              Text(model.appDescription),//更新文案
              Padding(//Padding控件用来设置边距
                  padding: const EdgeInsets.fromLTRB(0,10,0,10),//上边距为10
                  child: Text("${model.appVersion} • ${model.appSize} MB")
              )
            ]
        ));
  }
}